<div id="manageReservationsTabContentContainer"
     style="float: left;margin: 5px;border: 1px solid #CCCCCC;background-color: #F0F7FF;">
    <div id="reservationResourcesListBoxContainer"
         class="internalBox"
         style="width: 200px;">
        <div class="internalBoxHeader">
            Available Resources
        </div>
        <div id="reservationResourcesListContainer">

        </div>
    </div>
    <div class="internalBox"
         style="width: 700px;">
        <div class="internalBoxHeader">Reservation Calenar</div>
        <div class="internalBoxBody">
            <div id="homeCalendarContainer">
                <div id='fullcalendar'></div>
            </div>
        </div>
    </div>
</div>

<div id="addResourceReservationFormDialogContainer"
     title="Add New Reservation"
     style="font-size: 12px;">
    <div style="height: 200px;">
        <p class="validateTips">Complete all required (<span class="requiredFieldIndicator">*</span>) fields.</p>
        <form method="post"
              name="addResourceReservationForm"
              id="addResourceReservationForm">
            <fieldset style="padding:0; border:0;">
                <input type="hidden"
                       id="addResourceReservationId"
                       name="addResourceReservationId"
                       value="0"/>
                <div style="margin-bottom: 10px;">
                    <label for="addResourceReservationStartDate">
                        <span class="requiredFieldIndicator">*</span> <b>Start Date:</b>
                    </label>
                    <input type="text"
                           id="addResourceReservationStartDate"
                           name="addResourceReservationStartDate"
                           readonly />
                </div>
                <div style="margin-bottom: 10px;">
                    <label id="addResourceReservationEndDateLabel"
                           for="addResourceReservationEndDate">
                        <span class="requiredFieldIndicator">*</span> <b>End Date:</b>
                    </label>
                    <input type="text"
                           id="addResourceReservationEndDate"
                           name="addResourceReservationEndDate"
                           readonly />
                </div>
                <div style="margin-bottom: 10px;">
                    <label for="addResourceReservationReoccurrenceId">
                        <b>Reocurrence:</b>
                    </label>
                    <select id="addResourceReservationReoccurrenceId"
                            onchange="resourceReservationReoccurrenceManagement()"
                            style="width: 150px;display: block;">
                        <option value="0"></option>
                        <option value="1">Daily</option>
                        <option value="2">Weekly</option>
                        <option value="3">Monthly</option>
                    </select>
                </div>
                <div style="margin-bottom: 10px;">
                    <label id="addResourceReservationStopDateLabel"
                           for="addResourceReservationStopDate">
                        <b>Stop Date:</b> (<span class="requiredFieldIndicator">*</span> if reoccurrence is selected).
                    </label>
                    <input type="text"
                           id="addResourceReservationStopDate"
                           name="addResourceReservationStopDate"
                           readonly />
                </div>
                <div class="buttons"
                     style="margin-top: 20px;text-align: right;padding-top: 10px;border-top: 1px solid #CCCCCC;">
                    <button type="button"
                            name="closeAddResourceReservationFormButton"
                            id="closeAddResourceReservationFormButton"
                            onclick="closeAddResourceReservationDialog()">
                        Cancel
                    </button>
                    <button type="button"
                            name="submitAddResourceReservationFormButton"
                            id="submitAddResourceReservationFormButton"
                            onclick="submitAddResourceReservationForm()">
                        Create Reservation
                    </button>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<div id="deleteResourceReservationFormDialogContainer"
     title="Delete Reservation"
     style="font-size: 12px;">
    <input type="hidden" id="reservationIdToBeDeleted">
    <button type="button"
            name="closeDeleteResourceReservationFormButton"
            id="closeDeleteResourceReservationFormButton"
            onclick="closeDeleteResourceReservationDialog()">
        Cancel
    </button>
    <button type="button"
            name="submitDeleteResourceReservationFormButton"
            id="submitDeleteResourceReservationFormButton"
            onclick="submitDeleteResourceReservationForm()">
        Delete Reservation
    </button>
</div>